<template>
  <div class="profile-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>个人中心</span>
        </div>
      </template>
      
      <el-tabs v-model="activeTab">
        <el-tab-pane label="个人资料" name="info">
          <user-info :user-info="userInfo" @refresh="fetchUserInfo" />
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="password">
          <change-password />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getCurrentUser } from '@/api/user';
import UserInfo from './components/UserInfo.vue';
import ChangePassword from './components/ChangePassword.vue';

const route = useRoute();

// 当前激活的标签页
const activeTab = ref('info');

// 用户信息
const userInfo = ref<any>({});

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const res: any = await getCurrentUser();
    if (res.code === 200) {
      userInfo.value = res.data;
    } else {
      ElMessage.error(res.message || '获取用户信息失败');
    }
  } catch (error) {
    console.error('获取用户信息错误:', error);
    ElMessage.error('获取用户信息出错');
  }
};

// 监听路由参数变化
watch(() => route.query.tab, (tab) => {
  if (tab === 'password') {
    activeTab.value = 'password';
  } else {
    activeTab.value = 'info';
  }
}, { immediate: true });

onMounted(() => {
  fetchUserInfo();
});
</script>

<style lang="scss" scoped>
.profile-container {
  padding: 20px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>